<template>
	<view class="QS-Gradient-Swiper-Item">
		<!-- #ifdef APP-NVUE -->
		<view
			class="QS-Gradient-Swiper-Item"
			:style="{
				height: height + 'px',
				width: width + 'px'
			}"
		>
			<image
				class="QS-Gradient-Swiper-Item-image"
				:style="{
					height: Number(height) * 0.7 + 'px',
					width: Number(width) * 0.7 + 'px',
					left: Number(width) / 2 - (Number(width) * 0.7) / 2 + 'px',
					bottom: '0px'
				}"
				:src="item.img_url"
				mode="aspectFill"
			></image>
		</view>
		<!-- #endif -->
		<!-- #ifndef APP-NVUE -->
		<view class="QS-Gradient-Swiper-Item">
			<view :style="{ height: topnavHeight + 'px' }"></view>
			<image
				@tap="bannerhref(item)"
				:style="{ height: 'calc(100%  - ' + topnavHeight + 'px)' }"
				class="QS-Gradient-Swiper-Item-image"
				:src="item.img_url"
				mode="aspectFill"
			></image>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
export default {
	props: {
		item: {
			type: Object,
			default() {
				return {};
			}
		},
		index: {
			type: Number,
			default: -1
		},
		// #ifdef APP-NVUE
		height: {
			type: [String, Number],
			default: 0
		},
		width: {
			type: [String, Number],
			default: 0
		}
		// #endif
	},
	computed: {
		topnavHeight: function() {
			if (this.CustomBar) return this.CustomBar;
			var t = this.getSysBar();
			return t.navBar;
		}
	},
	created() {
		// #ifdef APP-NVUE
		console.log('height:' + this.height);
		console.log('width:' + this.width);
		// #endif
	},
	methods: {
		getSysBar: function() {
			var n = uni.getSystemInfoSync();
			let navBar = 'ios' == n.platform ? 44 + n.statusBarHeight : 48 + n.statusBarHeight;
			return {
				navBar,
				statusBar: n.statusBarHeight
			};
		},
		bannerhref(item) {
			if (item.path) {
				if (item.path == '/pages/index/index' || item.path == '/pages/classify/classify' || item.path == '/pages/mine/mine' || item.path == '/pages/car/car') {
					uni.switchTab({
						url: item.path
					});
				} else {
					uni.navigateTo({
						url: item.path
					});
				}
			}
		}
	}
};
</script>

<style scoped>
.QS-Gradient-Swiper-Item {
	/* #ifndef APP-NVUE */
	height: 100%;
	width: 100%;
	/* #endif */
	position: relative;
}
.QS-Gradient-Swiper-Item-image {
	background-color: #f8f8f8;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 694rpx;
	border-radius: 16upx;
}
</style>
